<template>
    <el-dialog title="轴心轨迹" :modal-append-to-body="false" :visible.sync="isShow" width="60%" :lock-scroll="true"
        :show-close="false">
        <!-- 轴心轨迹图 -->
        <div class="track" ref="track"></div>
        <i class="icon-qiehuan iconfont menu" title="切换" @click="switchWave"></i>
    </el-dialog>
</template>

<script>
import * as echarts from "echarts"

import { specDispalcementwaveApi } from "@/requset/api"
export default {
    data() {
        return {
            isShow: false,
            waveData: [{}, {}, {}],
            flag: 0
        }
    },
    props: [
        "sensorInfo", "time",
    ],
    methods: {
        showTrack() {

            if (!this.time) {
                this.$message({
                    message: "请选择频谱时间节点",
                    type: 'info',
                })
                return
            }
            let obj = {
                id: this.sensorInfo.id,
                time: this.time
            }
            this.specDispalcementwave(obj).then(() => {
                this.$nextTick(() => {

                    this.drawCharts(this.waveData[0], this.waveData[1])
                })
            })
        },
        specDispalcementwave(obj) {
            let names = ['轴向位移', '水平位移', '垂直位移']
            return specDispalcementwaveApi(obj).then(res => {

                if (res.data.code != 0) {
                    this.$message.info("查询失败")
                    return
                }
                let list = res.data.data
                if (list.length == 0) {
                    this.$message.info("该时间节点暂无数据")
                    return
                }
                for (let i = 0; i < 3; i++) {
                    this.waveData[i].arr = JSON.parse(res.data.data[i].value)
                    this.waveData[i].name = names[i]
                }
                this.isShow = true
            })
        },
        drawCharts(data1, data2) {
            let arr1 = data1.arr
            let arr2 = data2.arr
            let name1 = data1.name
            let name2 = data2.name
            let ref = this.$refs.track
            let myChart = echarts.init(ref)
            if (myChart) myChart.clear();
            ref.removeAttribute("_echarts_instance_");
            let arr = []
            arr1.forEach((e, i) => {
                arr.push([e, arr2[i]])
            })
            let option = {
                color: ["#FFDC00"],
                grid: {},
                series: [{
                    name: '',
                    data: arr,
                    type: "line",//scatter line
                    itemStyle: {
                        //下面是拐点样式配置属性
                        color: '#FCC62A',//这里设置的拐点颜色
                        borderColor: "#FCC62A", //  拐点边框颜色
                        borderWidth: 1, //  拐点边框宽度
                        // shadowColor: "#F5F5F5", //  阴影颜色
                        // shadowBlur: 1, //  阴影渐变范围控制
                    },
                    symbol: "circle", //拐点的形状
                    symbolSize: 2,
                }],
                xAxis: {
                    type: "value",
                    name: name1,
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 16,
                        color: "#0CD9E8"
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#0CD9E8",
                            fontSize: 12,
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#007BFF"
                        }
                    }
                },
                yAxis: {
                    type: "value",
                    name: name2,
                    nameLocation: "end", //name的具体位置，可调整上中下左
                    nameTextStyle: {
                        fontWeight: 600,
                        fontSize: 16,
                        color: "#0CD9E8"
                    },
                    axisLabel: {
                        show: true,
                        textStyle: {
                            color: "#0CD9E8",
                            fontSize: 12
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "#B2E3FF",
                            width: 0.4,
                            type: "dotted"
                        }
                    }
                },
                // tooltip，鼠标放到折线图上展示的数据展示样式
                tooltip: {
                    trigger: "item" // axis   item   none三个值
                },
                dataZoom: [
                    {
                        type: "slider",
                        realtime: true, //拖动滚动条时是否动态的更新图表数据
                        height: 15, //滚动条高度
                        start: 0, //滚动条开始位置（共100等份）
                        end: 100, //结束位置（共100等份）
                        fillerColor: "rgba(144,197,237,0.2)", // 填充颜色
                        handleColor: "rgba(70,130,180,0.8)" // 手柄颜色
                    }
                ],
                // 工具栏,右上角工具区域缩放
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            realtime: false,
                            yAxisIndex: "none"
                        }
                    }
                }
            };
            myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
        switchWave() {
            function delN(a) {
                return a % 3
            }
            this.flag = this.flag + 1
            this.drawCharts(this.waveData[delN(this.flag)], this.waveData[delN(this.flag + 1)])
        },
    },
    watch: {
        isShow: {
            handler(newVal) {
                if (!newVal) {
                    for (let i = 0; i < 3; i++) {
                        this.waveData[i] = {}
                    }
                }
            }
        }
    },

}
</script>

<style lang="less" scoped>
.track {
    width: 100%;
    height: 60vh;
}

.menu {
    width: 200px;
    height: 40px;
    position: absolute;
    top: 14px;
    left: 130px;
    font-size: 37px;
    color: aqua;
    cursor: pointer;
}
</style>
